<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>

    <style type="text/css">
        h3,
        p {
            text-align: center;
        }
        
        .container {
            /* 当 display 取值为 flex 或 inline-flex 时，该元素就是个 Flex容器 */
            display: flex;
            width: 80vw;
            height: 30vh;
            border: 5px solid gold;
            margin: 25px auto;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: stretch;
        }
        
        .item:nth-child(odd) {
            background: #6666fa;
        }
        
        .item:nth-child(even) {
            background: #fa6666;
        }
        
        .first>.item {
            /* flex : flex-grow flex-shrink flex-basis ; */
            flex: 0 1 10%;
        }
        
        .first>.item:nth-last-child(2) {
            /* flex : flex-grow flex-shrink flex-basis ; */
            flex: 1 1 10%;
        }
        
        .first>.item:nth-last-child(1) {
            /* flex : flex-grow flex-shrink flex-basis ; */
            flex: 3 1 10%;
        }
        
        .second {
            width: 500px;
        }
        
        .second>.item {
            /* flex-basis: 120px;
            flex-shrink: 1; */
            /* flex : flex-grow flex-shrink flex-basis ; */
            flex: 0 1 120px;
        }
        
        .second>.item:nth-last-child(2) {
            flex: 0 2 120px;
        }
        
        .second>.item:nth-last-child(1) {
            flex: 0 2 120px;
        }
    </style>

</head>

<body>

    <h3>弹性盒子</h3>
    <p> flex : flex-grow flex-shrink flex-basis ;</p>

    <div class="container first">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

    <p> flex : flex-grow flex-shrink flex-basis ;</p>
    <div class="container second">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

</body>

</html>